<template>
  <div id="rightContent3">
       <dv-border-box-1>
            <div class="bg-color-black">
                <div class="d-flex pt-2 pl-2">
                    <span style="color:#5cd9e8">
                    <icon name="chart-pie"></icon>
                    </span>
                    <div class="d-flex">
                    <span class="fs-xl text mx-2">{{text}}</span>
                    <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
                    </div>
                </div>
                <div class="d-flex jc-center">
                  <dv-scroll-board :config="config" style="width:100%;height:100%" />
                </div>
            </div>
       </dv-border-box-1>
    
  </div>
</template>

<script>
import {rig3Data} from '@/utils/data'
export default {
  data() {
    return {
        text:'实地考察得分情况（街道）',//累计测评点位
        config:{
          header: [],
          data: [],
          rowNum: 5, //表格行数
          headerHeight: 35,
          headerBGC: "#0f132580", //表头
          oddRowBGC: "#0f132575", //奇数行
          evenRowBGC: "#171c337d", //偶数行
          columnWidth: [50],
          align: ["center","center","center","center"]
        }
    };
  },
  components: {
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(){
      this.config.header = rig3Data.header;
      this.config.data = rig3Data.data;
    }
  }
};
</script>

<style lang="scss">
#rightContent3 {
  height: 29%;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
    .bg-color-black {
        height: 100%;
        border-radius: 0.125rem;
        background-color: #13192f00;
        padding: 0.2rem;
        .jc-center{
          padding: 0.1rem 0.2rem;
          height: 90%;
        }
    }
    .text {
        font-family: 'MEDIUM';
        color: #fff;
    }
    .chart-box {
        margin-top: 0.2rem;
        width: 2.125rem;
        height: 2.125rem;
        .active-ring-name {
            padding-top: 0.125rem;
        }
    }
}
</style>